<template>
	<view>
		<!-- 个人姓名、照片 -->
		<view class="layout">
			<view style="font-size: 50upx;padding-top: 70upx;padding-left: 50upx;">Hey XXX!</view>
			<view style="margin-left: 270upx;">
				<image style="width: 180upx;height: 180upx;border-radius: 50%;" :src="imageSrc"></image>
			</view>
		</view>
		<!-- 4个功能模块 -->
		<view class="layout2" style="margin-top: 20upx;">
			<view>
				<image style="width: 150upx;height: 120upx;" :src="imageSrc"></image>
				<view>精品网课</view>
			</view>
			<view>
				<image style="width: 150upx;height: 120upx;" :src="imageSrc"></image>
				<view>在线图书</view>
			</view>
			<view>
				<image style="width: 150upx;height: 120upx;" :src="imageSrc"></image>
				<view>名师直播</view>
			</view>
			<view>
				<image style="width: 150upx;height: 120upx;" :src="imageSrc"></image>
				<view>FM电台</view>
			</view>
		</view>
		<!-- 推荐课程模块 -->
		<view style="margin-top: 20upx;">
			<view style="font-size: 40upx;">推荐课程</view>
			<view style="background-color: #f7f7f7;padding-top: 50upx;padding-bottom: 30upx;">
				<!-- 推荐课程1 -->
				<view class="view1">
					<view>
						<image :src="imageSrc"></image>
					</view>
					<view class="view2">
						<view style="font-size: 40upx;font-weight: bold;">计算机office高级应用之...</view>
						<view>小黑课堂，小黑老师</view>
						<view>评分:4.9</view>
					</view>
				</view>
				<!-- 推荐课程2 -->
				<view class="view1">
					<view>
						<image :src="imageSrc"></image>
					</view>
					<view class="view2">
						<view style="font-size: 40upx;font-weight: bold;">计算机office高级应用之...</view>
						<view>小黑课堂，小黑老师</view>
						<view>评分:4.9</view>
					</view>
				</view>
				<!-- 推荐课程3 -->
				<view class="view1">
					<view>
						<image :src="imageSrc"></image>
					</view>
					<view class="view2">
						<view style="font-size: 40upx;font-weight: bold;">计算机office高级应用之...</view>
						<view>小黑课堂，小黑老师</view>
						<view>评分:4.9</view>
					</view>
				</view>
				<!-- 推荐课程4 -->
				<view class="view1">
					<view>
						<image :src="imageSrc"></image>
					</view>
					<view class="view2">
						<view style="font-size: 40upx;font-weight: bold;">计算机office高级应用之...</view>
						<view>小黑课堂，小黑老师</view>
						<view>评分:4.9</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 每日一书模块 -->
		<view style="background-color: #4CD964; height: 300upx;margin-top: 20upx;">
			5
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageSrc: '../../static/img/XXX.png',
			}
		},
		methods: {

		}
	}
</script>

<style>
	.layout{
		display: flex;
		flex-direction: row;
	}
	.layout2{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.view1{
		display: flex;
		flex-direction: row;
		margin-left: 20upx;
		margin-right: 20upx;
		margin-bottom: 30upx;
		background-color: #FFFFFF;
	}
	.view1 image{
		width: 180upx;
		height: 180upx;
		padding-left: 20upx;
		padding-top: 20upx;
	}
	.view2{
		margin-left: 30upx;
		margin-top: 20upx;
		margin-bottom: 10upx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
</style>
